<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">

			<block slot="content">个人中心</block>
		</cu-custom>

		<view class="bg-gradual-pink radius">

			<view class="flex p-xs margin-bottom-sm mb-sm">
				<view class="padding-sm margin radius" style="margin-right: 0px;">
					<view class="cu-avatar xl round margin-left bg-olive personnel">{{cutstr}}</view>
				</view>

				<view class="flex-twice padding-sm margin-xl" style="margin-left: 0px;">
					<text class="text-ABC text-bold">{{personnel.username}}</text>
					<view class="margin-top-xl text-abc">{{personnel.mobile}}</view>
				</view>

				<view class="flex-treble padding-sm margin-xl radius">
					<text class="cuIcon-settings text-white fr" @click="toSet()"></text>
				</view>
			</view>

		</view>

		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="solid-bottom text-sm padding">
				<text class="text-grey">{{title}}</text>
			</view>
		</view>
		<view class="bg-white">

			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" @click="jumpTo(item.id)">
					<view :class="['cuIcon-' + item.icon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cutstr:'',
				title:'',
				cuIconList: [],
				modalName: null,
				gridCol: 3,
				gridBorder: true,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				personnel: ''
			};
		},
		onLoad() {
			this.center();
		},
		onShow() {
			this.info();
		},
		methods: {
			// 详情
			info: async function() {
				let result = await this.$api.checklogin({});
				if (result.code == 1) {
					this.personnel = result.data.data;
					let cut = result.data.data.username;
					this.cutstr = cut.substr(1,1);
				} else {
					uni.hideToast();
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 个人中心
			center: async function(){
				let that = this;
				let result = await that.$api.personnelcenter({});
				if(result.code == 1){
					that.cuIconList = result.data.info;
					that.gridCol = result.data.grid_col;
					that.gridBorder = result.data.grid_border;
					that.title = result.data.title;
				}
			},
			// 跳转
			jumpTo: async function(id){
				let list = this.cuIconList;
				list.forEach(item=>{
					if(id == item.id){
						if(item.path != '#'){
							uni.navigateTo({
								url: item.path
							})
						}
					}
				})
			},
			// 设置
			toSet: async function() {
				uni.navigateTo({
					url: '/pages/user/set'
				})
			},
		}
	}
</script>


<style>
.personnel{
	width: 158upx;
	height: 158upx;
}
</style>
